import React from 'react';
import { useNavigate } from 'react-router-dom';

interface FeatureCardProps {
  title: string;
  description: string;
  icon: string;
  path: string;
  color: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({ title, description, icon, path, color }) => {
  const navigate = useNavigate();

  return (
    <div
      onClick={() => navigate(path)}
      style={{
        height: '100%',
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        border: '1px solid #e6eaee',
        background: '#ffffff',
        borderRadius: '12px',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
        padding: '32px 24px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-4px)';
        e.currentTarget.style.boxShadow = '0 8px 16px rgba(43, 138, 110, 0.15)';
        e.currentTarget.style.borderColor = '#2b8a6e';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.05)';
        e.currentTarget.style.borderColor = '#e6eaee';
      }}
    >
      <div
        style={{
          width: 80,
          height: 80,
          borderRadius: '50%',
          background: `${color}15`,
          border: `2px solid ${color}30`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 16,
          color: color,
          fontSize: 40,
        }}
      >
        {icon}
      </div>
      <div
        style={{
          color: '#1a1a1a',
          fontWeight: 600,
          fontSize: 20,
          marginBottom: 8,
        }}
      >
        {title}
      </div>
      <div
        style={{
          color: '#667085',
          fontSize: 14,
          lineHeight: 1.6,
        }}
      >
        {description}
      </div>
    </div>
  );
};

const Welcome: React.FC = () => {
  const features = [
    {
      title: '细胞类型配置',
      description: '定义和配置神经元细胞类型、分段和机制',
      icon: '🧠',
      path: '/cell-config',
      color: '#2ed573',
    },
    {
      title: '仿真配置',
      description: '设置仿真参数、持续时间和记录选项',
      icon: '⚙️',
      path: '/simulation-config-general',
      color: '#3498db',
    },
    {
      title: '网络拓扑',
      description: '构建神经网络连接和拓扑结构',
      icon: '🌐',
      path: '/simulation-config-network',
      color: '#9b59b6',
    },
    {
      title: '数据分析',
      description: '可视化和分析仿真结果数据',
      icon: '📊',
      path: '/plot-settings-raster',
      color: '#f39c12',
    },
    {
      title: '反应-扩散',
      description: '配置反应扩散模型和区域参数',
      icon: '🔬',
      path: '/reaction-diffusion-region',
      color: '#e74c3c',
    },
    {
      title: '实验管理',
      description: '管理和组织多个仿真实验',
      icon: '💾',
      path: '/experiment-manager',
      color: '#1abc9c',
    },
    {
      title: '模型导入',
      description: '导入NeuroML和Python格式的神经网络模型',
      icon: '📄',
      path: '/import-neuroml',
      color: '#16a085',
    },
  ];

  return (
    <div
      style={{
        minHeight: '100vh',
        background: '#f5f7f9',
        paddingTop: 64,
        paddingBottom: 80,
        position: 'relative',
      }}
    >
      {/* 顶部导航栏 */}
      <div
        style={{
          height: 64,
          background: '#ffffff',
          borderBottom: '1px solid #e6eaee',
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 1000,
          display: 'flex',
          alignItems: 'center',
          padding: '0 32px',
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
        }}
      >
        <div
          style={{
            color: '#2b8a6e',
            fontWeight: 600,
            fontSize: 18,
            letterSpacing: '0.5px',
          }}
        >
          类小脑计算平台
        </div>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 32px 0' }}>
        {/* 欢迎标题 */}
        <div
          style={{
            textAlign: 'center',
            marginBottom: 48,
          }}
        >
          <div
            style={{
              color: '#1a1a1a',
              fontWeight: 700,
              fontSize: 42,
              marginBottom: 16,
            }}
          >
            欢迎使用神经网络建模平台
          </div>
          <div
            style={{
              color: '#667085',
              fontSize: 20,
              fontWeight: 400,
            }}
          >
            选择一个功能模块开始您的神经网络建模之旅
          </div>
        </div>

        {/* 功能卡片 */}
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: 32,
            marginBottom: 64,
          }}
        >
          {features.map((feature, index) => (
            <FeatureCard key={index} {...feature} />
          ))}
        </div>

        {/* 技术标签 */}
        <div style={{ textAlign: 'center' }}>
          <div
            style={{
              color: '#1a1a1a',
              fontWeight: 600,
              fontSize: 28,
              marginBottom: 24,
            }}
          >
            技术栈
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
            {['NEURON', 'NetPyNE', 'Python', 'React', 'TypeScript', 'NeuroML', 'Jupyter'].map((tech, index) => {
              const colors = ['#2b8a6e', '#3498db', '#9b59b6', '#f39c12', '#e74c3c', '#2b8a6e', '#3498db'];
              const color = colors[index % colors.length];
              return (
                <div
                  key={tech}
                  style={{
                    padding: '8px 16px',
                    background: `${color}15`,
                    color: color,
                    fontWeight: 600,
                    borderRadius: 16,
                    fontSize: 14,
                  }}
                >
                  {tech}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* 底部工具栏 */}
      <div
        style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          padding: '24px 32px',
          background: '#ffffff',
          borderTop: '1px solid #e6eaee',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.05)',
          zIndex: 1000,
        }}
      >
        <div
          style={{
            color: '#667085',
            fontSize: 14,
          }}
        >
          类小脑计算平台 v1.0.0 - 神经网络建模与仿真平台
        </div>
        <div style={{ display: 'flex', gap: 16 }}>
          {['文档', '帮助', '关于'].map((item) => (
            <div
              key={item}
              style={{
                color: '#667085',
                fontSize: 14,
                cursor: 'pointer',
                transition: 'color 0.3s ease',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.color = '#2b8a6e';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = '#667085';
              }}
            >
              {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Welcome;

